﻿{% extends 'base.html' %}
{% load staticfiles %}
{% load bootstrap_tags %}
{% block extrastyle %}
<style>
.error-msg {
  color: #a94442;
}
#chart {
  height: 500px;
}

</style>
{% endblock %}
{% block script %}
{{block.super}}
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="{% static "js/themes/dark-blue.js" %}"></script>
<script type="text/javascript">
function OnFocusInput (input,html) {
	var f = document.getElementById("placeholder");
	f.innerHTML=html; 
}

function OnBlurInput (input, html) {
	var f = document.getElementById("placeholder");
	f.innerHTML=html; 
}

function ToggleDisplay(idon,idoff) {
	var on = document.getElementById(idon); 		
	var off = document.getElementById(idoff);
	on.style.display = 'block';
	off.style.display = 'none';
}

$(document).ready(function() {
	var selects = document.getElementsByTagName("select");
	var toel = {{toelichting|safe}};
	for (var i=0;i<selects.length;i++) {
		s = selects[i];
		s.onfocus = function(){OnFocusInput(this,toel[this.id]);};
		//s.onblur = function(){OnBlurInput(this,toel["home"]);};
	}
	var id1 = document.getElementById("id_reken_1");
	id1.onfocus = function(){OnFocusInput(this,toel['id_reken']);};
	id1.onchange = function(){ToggleDisplay("div_id_oppervlakte","div_id_volume");};
	var id2 = document.getElementById("id_reken_2");
	id2.onfocus = function(){OnFocusInput(this,toel['id_reken']);};
	id2.onchange = function(){ToggleDisplay("div_id_volume","div_id_oppervlakte");};
	if (id1.checked) {
		ToggleDisplay("div_id_oppervlakte","div_id_volume");
	}
	else {
		ToggleDisplay("div_id_volume","div_id_oppervlakte");
	}
		
});

$(function () {
	var options1 = {{chart1|safe}};
	options1.xAxis.labels.formatter = function() { return this.value;};
	$('#chart1').highcharts(options1);

	var options2 = {{chart2|safe}};
	options2.xAxis.labels.formatter = function() { return this.value;};
	options2.yAxis[0].labels.formatter = function() { return this.value;};
	options2.yAxis[1].labels.formatter = function() { return this.value;};
	$('#chart2').highcharts(options2);
});

</script>
{% endblock %}
{% block content %}
<div class = "container-fluid">
<div class = "row-fluid">
<div class = "col-md-3">
<form action="" method="post">
{% csrf_token %}
	{{ form|as_bootstrap }}
	<div class="form-actions">
	     <button type="submit" class="btn btn-primary">Berekenen</button>
	</div>
</form>
</div>
<div class = "col-md-9">
<div id="placeholder">
{% if chart1 %}
<div class="row">
<div class="col-md-6"><div id="chart1"></div>
<h3>Toelichting watergift</h3>
	De gele lijn geeft de optimale watergift die nodig is voor het gewas uitgedrukt in mm.<br/>
	De groene lijn geeft de beschikbare watergift uitgedrukt in mm.De mate waarin aan de optimale waterbehoefte wordt voorzien.
</div>
<div class="col-md-6"><div id="chart2"></div>
<h3>Toelichting kosten</h3>
	De gele lijn geeft de investeringskosten. Dit zijn de kosten die worden gemaakt in het eerste jaar en omvat de kosten voor aanleg en materiaal. Deze kosten worden uitgedrukt in &eacute;&eacute;n totaalbedrag voor het volledige systeem dat ‘turn-key’ wordt opgeleverd.
	De groene lijn geeft de totale kosten uitgedrukt in &euro; per hectare, per jaar. Deze totale kosten omvatten de investeringskosten, onderhoudskosten en afschrijvingskosten over 30 jaar.  
</div>
</div>
{% else %}
<div class = "panel panel-info">
	<div class = "panel-heading">
		<h3>Zoetwaterberger</h3>
	</div>
	<div class = "panel-body">
	<p>De zoetwaterberger is een tool waarmee u als agrariër inzicht kunt krijgen in de mogelijkheden van zelfvoorzienendheid met betrekking tot zoetwater voor uw bedrijf.</p>
	<p>Op basis van een aantal kengetallen zoals perceelgrootte, volume van het bassin en teelt, kunt u de kosten en de beschikbaarheid van zoetwater voor uw bedrijf berekenen. </p>
	<p>U kiest stapsgewijs uw meteorologische situatie, de grondsoort op uw bedrijf, het soort irrigatiesysteem, de grondwaterkwaliteit op uw bedrijf en het volume van het waterreservoir (bassin) of oppervlakte van de teelt die u wil gaan irrigeren.  
	Hieruit volgt dan een grafiek die de gemiddelde watertekorten weergeeft behorend tot de combinatie van het perceelgrootte en het volume van het bassin.</p>
	</div>
</div>
{% endif %}
</div>
</div>
</div>
</div>
{% endblock %}
